<template>
  <div>
    <el-card class="box-card">
      <el-row :gutter="20">
        <el-col :span="4">
          <el-button type="primary" size="small" @click="addDialogVisible = true">新增</el-button>
        </el-col>
      </el-row>
      <el-table :data="navInfo" border stripe v-loading="loading"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading">
        <el-table-column prop="id" label="id" type="selection" fixed></el-table-column>
        <el-table-tree-column fixed :expand-all="!!!1" child-key="child" file-icon="icon icon-file"
                              folder-icon="icon icon-folder"
                              levelKey='level'
                              prop="title" label="名称" :show-overflow-tooltip="true" :indent-size="20"
                              parentKey='parent_id'
                              treeKey='id'>
        </el-table-tree-column>
        <el-table-column prop="path" label="路由"></el-table-column>
        <el-table-column prop="level" label="等级">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.level === 0">一级</el-tag>
            <el-tag v-else-if="scope.row.level === 1" type="success">二级</el-tag>
            <el-tag v-else="scope.row.level === 2" type="warning">三级</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-tooltip effect="dark" content="添加子菜单" placement="top" :enterable="false">
              <el-button type="success" icon="el-icon-plus" v-has="'dashboard/child_save'" size="mini"
                         @click="addChildNavDialog(scope.row.id,scope.row.title)"></el-button>
            </el-tooltip>
            <el-tooltip effect="dark" content="编辑" placement="top" :enterable="false">
              <el-button type="primary" icon="el-icon-edit" v-has="'dashboard/menuSave'" size="mini" @click="editNavDialog(scope.row)"
              ></el-button>
            </el-tooltip>
            <el-tooltip effect="dark" content="删除" placement="top" :enterable="false">
              <el-button type="danger" icon="el-icon-delete" v-has="'dashboard/menuDel'" size="mini" @click="delNav(scope.row.id)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 添加用户的对话框 -->
    <el-dialog title="新增" :visible.sync="addDialogVisible" width="50%" @close="addDialogClose">
      <!--内容主题区 -->
      <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px" class="demo-ruleForm">
        <el-form-item label="名称" prop="title">
          <el-input v-model="addForm.title"></el-input>
        </el-form-item>
        <el-form-item label="英文名称" prop="en_title">
          <el-input v-model="addForm.en_title" type="en_title"></el-input>
        </el-form-item>
        <el-form-item label="路由" prop="path">
          <el-input v-model="addForm.path"></el-input>
        </el-form-item>
        <el-form-item label="图标" prop="icon">
          <el-input v-model="addForm.icon"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-switch v-model="addForm.status"></el-switch>
        </el-form-item>
      </el-form>
      <!--底部按钮区 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addNav">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 新增子菜单 -->
    <el-dialog title="添加子导航" :visible.sync="addChildNavDialogVisible" width="50%" @close="addChildNavDialogClose">
      <el-form :model="addChildNavForm" :rules="addFormRules" ref="addChildNavRef" label-width="70px">
        <el-form-item label="parent_id" prop="parent_id" hidden>
          <el-input v-model="addChildNavForm.parent_id"></el-input>
        </el-form-item>
        <el-form-item label="上级" prop="parent_title">
          <el-input v-model="addChildNavForm.parent_title" disabled></el-input>
        </el-form-item>
        <el-form-item label="名称" prop="title">
          <el-input v-model="addChildNavForm.title"></el-input>
        </el-form-item>
        <el-form-item label="英文名称" prop="en_title">
          <el-input v-model="addChildNavForm.en_title"></el-input>
        </el-form-item>
        <el-form-item label="路由" prop="path">
          <el-input v-model="addChildNavForm.path"></el-input>
        </el-form-item>
        <el-form-item label="图标" prop="icon">
          <el-input v-model="addChildNavForm.icon"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-switch v-model="addChildNavForm.status"></el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
              <el-button @click="addChildNavDialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="addChildNav">确 定</el-button>
          </span>
    </el-dialog>
    <!-- 编辑菜单 -->
    <el-dialog title="编辑" :visible.sync="editNavDialogVisible" width="50%" @close="editNavDialogClose">
      <el-form :model="editNavForm" :rules="addFormRules" ref="editNavRef" label-width="70px">
        <el-form-item label="父级" prop="parent_id">
          <el-select-tree :default-expand-all="defaultExpandAll"
                          :multiple="multiple"
                          :placeholder="placeholder"
                          :disabled="disabled"
                          :disabled-values="disabledValues"
                          :data="navInfo"
                          :props="treeProps"
                          :check-strictly="checkStrictly"
                          :clearable="clearable"
                          v-model="value" style="width:100%"></el-select-tree>
        </el-form-item>
        <el-form-item label="名称" prop="title">
          <el-input v-model="editNavForm.title"></el-input>
        </el-form-item>
        <el-form-item label="英文名称" prop="en_title">
          <el-input v-model="editNavForm.en_title"></el-input>
        </el-form-item>
        <el-form-item label="路由" prop="path">
          <el-input v-model="editNavForm.path"></el-input>
        </el-form-item>
        <el-form-item label="图标" prop="icon">
          <el-input v-model="editNavForm.icon"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-switch v-model="editNavForm.status"></el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
              <el-button @click="editMenuDialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="editNav">确 定</el-button>
          </span>
    </el-dialog>
  </div>
</template>

<script>
import ElSelectTree from 'el-select-tree';
export default {
  name: 'index',
  components: {
    ElSelectTree
  },
  data(){
    return{
      navInfo:[],
      addDialogVisible: false,
      addChildNavDialogVisible:false,
      editNavDialogVisible:false,
      queryInfo: {
        title: '',
        type: 'child'
      },
      loading:true,
      clearable: true,
      defaultExpandAll: false,
      multiple: false,
      placeholder: '请选择父级',
      disabled: false,
      checkStrictly: true,
      treeProps: {
        value: 'id',
        children: 'child',
        label: 'title'
      },
      value: '',
      disabledValues: [],
      addForm: {
        title: '',
        en_title: '',
        path: '',
        icon:'',
        status: true,
      },
      addChildNavForm: {
        parent_id: '',
        parent_title: '',
        title: '',
        en_title: '',
        icon:'',
        status: true,
      },
      editNavForm: {
        parent_id: '',
        title: '',
        path: '',
        en_title: '',
        icon:'',
        status: true,
      },
      addFormRules:{
        title: [
          {required: true, message: '请输入标题', trigger: 'blur'},
          {min: 2, max:10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
        ],
      }
    }
  },
  created () {
    this.getNavInfo()
  },
  methods:{
    //数据列表
    async getNavInfo(){
      const {data: res} = await this.$http.get('dashboard/nav_list',{params: this.queryInfo})
      if (res.code !== 200) return this.$message.error('获取菜单列表失败')
      this.navInfo = res.data.list
      this.loading = false
    },
    //表单重置
    addDialogClose() {
      this.$refs.addFormRef.resetFields()
    },
    editNavDialogClose(){
      this.disabledValues = []
      this.$refs.editNavRef.resetFields()
    },
    addChildNavDialogClose(){
      this.$refs.addChildNavRef.resetFields()
    },
    //保存
    addNav(){
      this.$refs.addFormRef.validate(async valid => {
        if (!valid) return this.$message.error('输入不合法')
        const {data: result} = await this.$http.post('dashboard/save_nav', this.addForm)
        if (result.code !== 200) return this.$message.error(result.data.message)
        this.$message.success('添加成功')
        this.addDialogVisible = false
        this.getNavInfo()
      })
    },
    //添加子导航
    addChildNavDialog(id, title){
      this.addChildNavForm.parent_id = id
      this.addChildNavForm.parent_title = title
      this.addChildNavDialogVisible = true;
    },
    editNavDialog(navInfo){
      this.editNavForm.title = navInfo.title
      this.editNavForm.path = navInfo.path
      this.editNavForm.en_title = navInfo.en_title
      this.editNavForm.icon = navInfo.icon
      if (navInfo.status === 1) {
        this.editNavForm.status = true
      } else {
        this.editNavForm.status = false
      }
      this.$set(this.editNavForm, 'id', navInfo.id)
      this.value = navInfo.parent_id
      this.editNavDialogVisible = true
    },
    async delNav(id){
      const configResult = await this.$confirm('此操作将永久删除该导航, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err);
      if (configResult !== 'confirm') return this.$message.info('已取消删除')
      const {data: result} = await this.$http.delete('dashboard/del_nav/' + id)
      if (result.code !== 200) return this.$message.error(result.data.message)
      this.$message.success('删除成功')
      this.getNavInfo();
    },
    addChildNav(){
      this.$refs.addChildNavRef.validate(async valid => {
        if (!valid) return this.$message.error('输入不合法')
        const {data: result} = await this.$http.post('dashboard/save_nav', this.addChildNavForm)
        if (result.code !== 200) return this.$message.error(result.data.message)
        this.$message.success('添加子导航成功')
        this.addChildNavDialogVisible = false
        this.getNavInfo()
      })
    },
    editNav(){
      this.editNavForm.parent_id = this.value
      this.$refs.editNavRef.validate(async valid => {
        if (!valid) return this.$message.error('输入不合法')
        const {data: result} = await this.$http.post('dashboard/save_nav', this.editNavForm)
        if (result.code !== 200) return this.$message.error(result.data.message)
        this.$message.success('编辑导航栏成功')
        this.editNavDialogVisible = false
        this.getNavInfo()

      })
    }
  }
}
</script>

<style scoped>

</style>
